<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <script src="js/acey_js.js"></script>
    <style>
        *{margin: 0px;  padding: 0px;  font-size: 13px;  list-style: none;  }
        header{  height: 40px;  width: 100%;  background: #20a1a1;  text-align: center;  color: white;font-weight: bold ; line-height: 40px;  position: fixed;  top: 0px;  z-index: 2;  }
        .back{  color: white;  float: left;  line-height: 40px;  margin-left:10px;  font-size: 13px;font-weight: bold  }
        img{  width: 100%;  height: 270px;  padding: 0px;  opacity: 0.9; /*border-radius: 12px;*/  margin-top: 40px;  }
        #content{padding: 10px;  }
        .product_info{  display: block;  color: black;  font-size: 17px;    font-family: STXihei;  }
        .price span{  position: absolute;  color: red;  font-size: 20px;  font-weight: bold;  }
        .promotion_price span{  display: block;  font-size: 13px;  margin-top: 28px;  position: absolute;  margin-left: 2%;  text-decoration: line-through;  }
        .address{  position: absolute;  color: gray;  font-size: 12px;  float: left;  margin-top: 60px;  }
        .number{  color: gray;  font-size: 12px;  float: right;  margin-top: 60px;  }
        footer{  border: 1px solid gainsboro;  width: 100%;  height: 55px;  position: fixed;  bottom: 0px;  background-color: white;  }
        footer li{ float: left;  height: 55px;  line-height: 55px;  border-right: 0px solid gainsboro;  text-align: center;  }
        .glyphicon-headphones, .glyphicon-briefcase,.glyphicon-star-empty{  font-size: 20px;  color: dodgerblue;  font-weight: bold;  position: absolute;  margin-top: 8px;  margin-left: 1%;  }
        .message,.intoStore,.collect{  line-height: 80px;  color: gray;  font-size: 12px; text-align: center }
        .remark{  width: 100%;  height: 30px;  line-height: 30px;  background-color: lightblue;  margin-top: 75px;  padding-left: 5px;  }
        .product_description{  width: 100%;  border: 0px solid red;  }
        .description_title{  color: gray;  font-size: 14px;  padding-left: 5px;  display: block;  }
        .description_content{  color: gray;  display: block;  font-size: 12px;  padding-left: 10px;  padding-right: 10px;  line-height: 23px;  text-indent: 20px;  text-align: justify;  }
        .choose{ width: 100%;  height: 370px;  border: 1px solid gainsboro;  position: fixed;  z-index: 2;  background-color: white;  bottom: -400px;  }
        .choose img{width: 110px;height: 110px;padding: 5px;background: #fff2cc;border-radius: 8px;margin-top: -30px;margin-left: 5%}
        .choose .price{ color: red;font-size: 18px;font-weight: bold;display: block;margin-left: 137px ;margin-top: -70px}
        .choose .warning{display: block;font-size: 12px;color: gray;margin-left: 140px;margin-top: 17px}
        .kind{width: 90%;height: 227px;border: 0px solid red;margin: 15px auto;border-bottom: 1px solid gainsboro}
        .kind_title{font-size: 15px;display: block;margin: 3px 5px}
        .btn-group{margin-left: 10px}
        .choose_number{display: block;margin:35px 10px;font-size: 16px}
        .reduce_number{width: 35px;height: 30px;font-weight: bold;font-size: 17px;margin-left: 140px;margin-top: -60px;display: block;border-radius: 5px 0 0 5px;border: 0px}
        .add_number{width: 35px;height: 30px;font-weight: bold;font-size: 17px;margin-left: 240px;display: block;margin-top: -30px;border-radius: 0 5px 5px 0;border: 0px}
        #number{width: 50px;height: 30px;text-align: center;font-weight: bold;font-size: 17px;margin-left: 183px;display: block;margin-top: -30px;border: 0px}
        .ok{width: 100%;background-color: red;border: 0px;margin-top: 10px}
        .kind button{margin-left: 15px;font-size: 12px;}
        .close{float: right;margin-right: 5px}
    </style>
    <script>
        var size = new Array();
        var sizeId=1 ;
        var flavorId=1;
        var flavor = new Array();
        var product;
        var sizeNum;
        var flavorNum;
        var userId = 2;
        var id;
        var businessId;
        $(function () {
            $(".add").on("click",function () {
                $(this).addClass("gwc");
                $(".choose").animate({
                    bottom:"0px"
                },700)
            });
            $(".buy").on("click",function () {
                $(this).addClass("jiesuan");
                $(".choose").animate({
                    bottom:"0px"
                },700)
            });
            $(".close").on("click",function () {
                $(".choose").animate({
                    bottom:"-400px"
                },500)
                $(".add").removeClass("gwc")
            })
            $(".add_number").on("click",function () {
                var val = document.getElementById("number").value;
                document.getElementById("number").value = parseInt(val) + 1;
                changePrice();
            })
            $(".reduce_number").on("click",function () {
                var val = document.getElementById("number").value;
                document.getElementById("number").value = parseInt(val) - 1;
                if($("#number").val()<1){
                    document.getElementById("number").value=1;
                }
                changePrice();
            })
        })
        id = location.href.split("?")[1];
        $.ajax({
            url:"http://obao.tunnel.2bdata.com/product_detail.htm?id="+id+"&userId="+2,
            success:function (data){
                //每次进入商品详情页面都更新当前用户的足迹
                businessId = data.business.businessId;
                updateFootprint(id);
                product = data;
                var str="";
                var img = "http://obao.tunnel.2bdata.com/upload/product/"+data.detail.productImg;
                str += "<div id='img'><img  src="+img+"></div>";
                str += "<input type='hidden'class='hide-businessId' value='"+businessId+"'/>";
                str += "<input type='hidden'class='hide-businessPhoto' value='"+data.business.photo+"'/>";
                str += "<input type='hidden'class='hide-productId' value='"+data.detail.productId+"'/>";
                str += "<input type='hidden'class='hide-productImg' value='"+data.detail.productImg+"'/>";
                str += "<input type='hidden'class='mapping-price'/>";
                str+="<div id='content'><span class='product_info'>"+data.detail.productName+"</span>";
                str+="<span class='price'><span>￥</span><span style='margin-left: 25px'>"+data.detail.newPrice+"</span></span>";
                str+="<span class='promotion_price'><span >原价:</span><span style='margin-left: 37px'>"+data.detail.oldPrice+"</span></span>";
                str+="<span class='address hide-business-name'>"+data.business.name+"</span>";
                str+="<span class='number'>月销售量:"+data.detail.sales+"</span></div>";
                str+="<div class='remark'><span>商品描述:</span></div>";
                str+="<div class='product_description'>";
                str+="<span class='description_content'>"+data.detail.productDetails+"</span>";
                str+="</div>";
                $("#aa").append(str);
                //弹出框
                size = data.sizes;
                flavor = data.flavors;
                if(size == "") {
                    $("#sizeTitle").html("");
                }
                if(flavor == ""){
                    $("#flavorTitle").html("");
                }
                $("#chooseImg").attr({src:img});
                $("#choosePrice").text("￥"+data.detail.newPrice+"元");
                for(var i = 0; i < size.length; ++i){
                    sizeId = size[0].id;
                    str = "";
                    str += "<button type='button' class='btn btn-default'  value="+i+" onclick='sizeChange(this,"+size[i].id+")' >"+size[i].size+"</button>";
                    $("#size").append(str);
                }
                for(var i = 0; i < flavor.length; ++i){
                    flavorId = flavor[0].flavorId;
                    str = "";
                    str += "<button type='button' class='btn btn-default' value="+i+" onclick='flavorChange(this,"+flavor[i].flavorId+")' >"+flavor[i].name+"</button>";
                    $("#flavor").append(str);
                }
            }
        })
        //大小碗
        function sizeChange(t,id) {
            sizeId = id;
            $(t).addClass("active").siblings().removeClass("active");
            sizeNum = $(t).val();
            if(flavorNum != null){
                $(".warning").html("已选择：<span class='select-size-flavor'>"+size[sizeNum].size+"/"+flavor[flavorNum].name+"</span>");
            }else{
                $(".warning").html("已选择：<span class='select-size-flavor'>"+size[sizeNum].size+"</span>");
            }
            changePrice();
        }
        //品味
        function flavorChange(t,id) {
            flavorId = id;
            $(t).addClass("active").siblings().removeClass("active");
            flavorNum = $(t).val();
            if(sizeNum != null){
                $(".warning").html("已选择：<span class='select-size-flavor'>"+size[sizeNum].size+"/"+flavor[flavorNum].name+"</span>");
            }else{
                $(".warning").html("已选择：<span class='select-size-flavor'>"+flavor[flavorNum].name+"</span>");
            }
        }
        //changePrice
        function changePrice() {
            var price = sizeNum == null ? product.detail.newPrice : size[sizeNum].price;
            price = price;
            $("#choosePrice").html("￥"+price+"元");
            $(".mapping-price").val(price);
        }
        //添加到购物车
        function sub() {
            if($(".add").hasClass("gwc")){
                var num = $("#number").val();
                var data = {"number":num,
                    "product.productId":id,
                    "productSize.id":sizeId,
                    "productFlavor.flavorId":flavorId,
                    "op":"添加到购物车",
                };
                var url = "http://obao.tunnel.2bdata.com/cart!add.htm";
                $.post(url,data);
                $(".choose").animate({
                    bottom:"-400px"
                },500);
                acey_toast("成功添加购物车", 2000);
                $(".add").removeClass("gwc")
            }else if($(".buy").hasClass("jiesuan")){
                //立即购买
                var businessId=$(".hide-businessId").val();
                var businessName=$(".hide-business-name").text();
                var businessImg=$(".hide-businessPhoto").val();
                var productId=$(".hide-productId").val();
                var productName=$(".product_info").text();
                var sizeAndFlavor=$(".select-size-flavor").text();
                var productImg=$(".hide-productImg").val();
                var productPrice=$(".mapping-price").val();
                var number=$("#number").val();
                var pra = "gotobuyingPRO"+businessId+"PRO"+businessName+"PRO"+businessImg;
                pra+="PRO"+productId+"PRO"+productName+"PRO"+sizeAndFlavor+"PRO"+productImg+"PRO"+productPrice+"PRO"+number;
                var  goto= encodeURIComponent(pra);
               location.href="http://obao.tunnel.2bdata.com/placeorder.html?"+goto;
            }
        }
        //添加到收藏
        function addToCollect() {
            var isCollect= $(".collect-ico").text();
            if(isCollect=="收藏"){
                var data = {"product.productId":id,"user.userId":2};
                var url = "http://obao.tunnel.2bdata.com/collect!add.htm";
                $.post(url,data);
                $(".collect-ico").text("已收藏");
                $(".collect-ico").css("color","#EE4000");
                $(".collect-btn").css("color","#EE4000");
                $(".collect-btn").css("margin-left","10px");
            }else{
                var data = {"product.productId":id,"user.userId":2};
                var url = "http://obao.tunnel.2bdata.com/collect!add.htm";
                $.post(url,data);
                $(".collect-ico").text("收藏");
                $(".collect-ico").css("color","gray");
                $(".collect-btn").css("color","gray");
                $(".collect-btn").css("margin-left","3px");
            }
        }
        function inShop() {
            location.href = "merchantMai.html?"+businessId;
        }
        function hidden() {
            var ifr1=window.parent.document.getElementById('bottom');
            ifr1.style.display="none";
        }
        function show() {
            var ifr1=window.parent.document.getElementById('bottom');
            ifr1.style.display="";
        }
    </script>
</head>
<body onload="hidden()">
<header class="header">
    <span class="back" onclick="history.go(-1);show()"><</span>
    <span style="margin-left: -5%;font-size: 15px;font-weight: bold">商品详情</span>
</header>
<div id="aa"></div>
<div style="height: 60px"></div>
<!--底部导航-->
<footer>
    <ul>
        <li class="message" style="width: 15%;"><span class="glyphicon glyphicon-headphones"></span>客服</li>
        <li class="intoStore" style="width: 15%" onclick="inShop()"><span class="glyphicon glyphicon-briefcase" style="color: gray"></span>进店</li>
        <li class="collect" style="width: 15%;" onclick="addToCollect();"><span class="glyphicon glyphicon-star-empty collect-btn" style="color: gray"></span><span class="collect-ico">收藏</span></li>
        <li class="add" style="width: 27%;background: darkorange;color: white;font-size: 15px">加入购物车</li>
        <li class="buy" style="width: 28%;background: #B22222;color: white;font-size: 15px">立即购买</li>
    </ul>
</footer>
<!--弹出框start-->
<div class="choose">
    <span class="close">×</span>
    <img src="" id="chooseImg">
    <span class="price" id="choosePrice">￥元</span>
    <span class="warning">请选择商品数量和分类</span>
    <div class="kind">
        <span class="kind_title" id="sizeTitle">商品分类</span>
        <div class="info_kind" id="size">
            <!--<button type="button" class="btn btn-default">大碗</button>-->
            <!--<button type="button" class="btn btn-default">中碗</button>-->
            <!--<button type="button" class="btn btn-default">小碗</button>-->
        </div>
        <span class="kind_title" id="flavorTitle">选择口味</span>
        <div class="taste" id="flavor">
            <!--<button type="button" class="btn btn-default">微辣</button>-->
            <!--<button type="button" class="btn btn-default">中辣</button>-->
            <!--<button type="button" class="btn btn-default">特辣</button>-->
        </div>
        <hr>
        <span class="choose_number">购买数量：</span>
        <input type="button" value="-" class="reduce_number" >
        <input type="text" readonly="true" value="1" id="number" >
        <input type="button" value="+" class="add_number" >
    </div>
    <span class="warn" style="position: absolute;margin-top: -10px;margin-left: 5%;color: red"></span>
    <button type="button" class="btn btn-primary ok" onclick="sub(this);">确定</button>
</div>
<!--弹出框end-->
</body>
</html>